<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>我的保单</title>
    <link rel="stylesheet" href="css/project.css">
    <script src="js/libs/jquery-3.0.0.min.js"></script>
    <script src="js/libs/jquery-weui.min.js"></script>
    <script src="js/libs/vue2.0.js"></script>
    <script src="js/project.js"></script>
    <style>
        body{background-color: #f2f3f8;}
        .weui_cells:before,.weui_cells:after{display: none;}
        .u-card{margin: 10px 10px;}
        .weui_cells_title{font-size: 12px;color: #8a90af;margin-top: 15px;}
        /* 图标 */
        .order_id{font-size: 14px;color: #68709a;  overflow: hidden;  text-overflow: ellipsis;  }
        .order_title{font-size: 16px;line-height:30px;color: #333;}
        .order_price{font-size: 23px;color: #333;}
        .weui_cell.bottom{font-size: 12px;color: #68709a;margin-left: 65px;}
        .weui_cell.bottom:before{border-top: dashed 1px #bababa;}
        .weui_cell.bottom .weui_cell_ft{color: #68709a;}
        .weui_cell .weui_cell_primary{  overflow: hidden;  -webkit-line-clamp: 1;  display: -webkit-box;  -webkit-box-orient: vertical;  }
        .weui_cell_ft{overflow: hidden;white-space: nowrap;}

        /* 删除按钮 */
        .weui_cells{position: relative;}
        .weui_cells .icon-delete{
            position: absolute;
            top:-6px;
            right: 0;
            font-size: 30px;
            color: #666;
            z-index: 100;
        }

        .has-order .weui_cells:before, .weui_cells:after{ display: none; }
        .has-order .u-card{ margin: 10px 10px; }
        .has-order .weui_cells_title{ font-size: 12px; color: #8a90af; margin-top: 15px; }
        /* 图标 */
        .has-order .weui_cell_primary{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
        .has-order .order_id{ font-size: 14px; color: #68709a; white-space: nowrap; overflow: hidden;  text-overflow: ellipsis;}
        .has-order .order_title{ font-size: 16px; line-height: 30px; color: #333; }
        .has-order .order_price{ font-size: 23px; color: #333; }
        .has-order .order_protectedPerson{ font-size: 12px; color: #68709a; }

        .has-order .weui_cell.bottom{ font-size: 12px; color: #68709a; margin-left: 65px; }
        .has-order .weui_cell.bottom:before{ border-top: dashed 1px #bababa; }
        .has-order .weui_cell.bottom .weui_cell_ft{ color: #68709a; }
        .has-order .weui_btn{ line-height: 25px; font-size: 13px; }
        .has-order .weui_btn_plain_default{ background-color: #fff; }
    </style>
</head>
<body>
<div id="app">

    <!-- 有保单/订单/未提交订单时 -->
    <div v-if="effectList.length || noEffectList.length || unPayList.length || unSubmitList[0].productName">
        <div v-if="effectList.length">
            <div class="weui_cells_title">已生效</div>
            <div class="weui_cells u-card" style="background-color: #fff;" v-for="item in effectList"
                 @click="jumpToPolicy(item.id)" >
                <div class="weui_cell top" style="padding-bottom: 4px;">
                    <div class="weui_cell_hd icon" style="margin-right: 15px;"><i class="z-order-success"></i></div>
                    <div class="weui_cell_bd weui_cell_primary">
                        <div class="order_id">保单号:{{item.policyNo}}</div>
                        <h4 class="order_title">{{item.productName}}</h4>
                    </div>
                    <div class="weui_cell_ft  order_price">￥{{item.premiumY}}</div>
                </div>
                <div class="weui_cell bottom">
                    <div class="weui_cell_bd weui_cell_primary">被保人:{{item.insurantName}}</div>
                    <div class="weui_cell_ft">保期:{{item.effectiveDateYMD}}-{{item.expiryDateYMD}}</div>
                </div>
            </div>
        </div>

        <div v-if="noEffectList.length">
            <div class="weui_cells_title">已失效</div>
            <div class="weui_cells u-card" style="background-color: #fff;" v-for="item in noEffectList"
                 @click="jumpToPolicy(item.id)" >
                <div class="weui_cell top" style="padding-bottom: 4px;">
                    <div class="weui_cell_hd icon" style="margin-right: 15px;"><i class="z-order-overdue"></i></div>
                    <div class="weui_cell_bd weui_cell_primary">
                        <div class="order_id">保单号:{{item.policyNo}}</div>
                        <h4 class="order_title">{{item.productName}}</h4>
                    </div>
                    <div class="weui_cell_ft order_price">￥{{item.premiumY}}</div>
                </div>
                <div class="weui_cell bottom">
                    <div class="weui_cell_bd weui_cell_primary">被保人:{{item.insurantName}}</div>
                    <div class="weui_cell_ft">保期:{{item.effectiveDateYMD}}-{{item.expiryDateYMD}}</div>
                </div>
            </div>
        </div>

        <div v-if="unPayList.length" class="has-order">
            <div class="weui_cells_title">待支付</div>
            <div class="weui_cells u-card" style="background-color: #fff;"
                 v-for="item in unPayList">
                <i class="iconfont icon-delete" @click="handlerDelete(item.id)"></i>

                <div class="weui_cell top" style="padding-bottom: 4px;" @click="jumpToBuy(item.id)">
                    <div class="weui_cell_hd icon" style="margin-right: 15px;"><i class="z-order-unPay"></i></div>
                    <div class="weui_cell_bd weui_cell_primary">
                        <div class="order_id">订单号:{{item.id}}</div>
                        <h4 class="order_title">{{item.productTitle}}</h4>
                    </div>
                    <div class="weui_cell_ft order_price">￥{{item.premium/100}}</div>
                </div>
                <div class="weui_cell bottom">
                    <div class="weui_cell_bd weui_cell_primary">被保人:{{item.insurantName}}</div>
                    <div class="weui_cell_ft">保期:{{item.effectiveDateYMD}}-{{item.expiryDateYMD}}</div>
                </div>
            </div>
        </div>

        <div v-if="unSubmitList[0].productName" class="has-order unSubmitList">
            <div class="weui_cells_title">未提交</div>
            <div class="weui_cells u-card" style="background-color: #fff;"
                 v-for="item in unSubmitList" @click="jumpToBuy(1)">
                <div class="weui_cell top" style="padding-bottom: 4px;">
                    <div class="weui_cell_hd icon" style="margin-right: 15px;"><i class="z-order-unPay"></i></div>
                    <div class="weui_cell_bd weui_cell_primary">
                        <div class="order_id">{{item.productName}}</div>
                        <!--<h4 class="order_title">{{item.productTitle}}</h4>-->
                    </div>
                    <div class="weui_cell_ft order_price">￥{{item.showPrice}}</div>
                </div>
                <div class="weui_cell bottom">
                    <div class="weui_cell_bd weui_cell_primary">被保人:{{item.insurantName}}</div>
                    <div class="weui_cell_ft">保期:{{item.policyStartTime}}-{{item.policyEndTime}}</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 没有保单时 -->
    <div v-else>
        <div style="text-align: center;padding: 20px;">
            <img width="163" height="170" src="./images/status_1.png" alt="">
            <p style="font-size: 16px;line-height:36px;color: #333;">还没有购买记录哦~</p>
        </div>
        <a href="index.html" class="weui_btn" style="margin: 20px 15px;">去看看</a>
    </div>

</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: function () {
            return {
                /* 已生效 */
                effectList: [

                ],
                /* 已失效 */
                noEffectList: [
                ],
                /* 未支付 */
                unPayList: [

                ],
                unSubmitList: [
                ]
            }
        },
        methods: {
            jumpToPolicy (orderId) {
                window.location.href = 'policyDetail.html?orderId='+orderId;
            },
            jumpToBuy (orderId){
                if(orderId == 1){
                    window.location.href = 'fillInformation.html?unSubmitOrder='+orderId;
                }else {
                    window.location.href = 'fillInformation.html?orderId='+orderId;
                }
            },
            handlerDelete(id){
                console.log(id);
                $.confirm({
                    title: '删除未支付订单',
                    text: '确认删除?',
                    onOK: function () {
                        //点击确认
                        var url = '/wego168-xsinsurance-wechat/order/deleteOrder.jsp?orderId='+id;
                        $.get(url, function (data) {
                            data = JSON.parse(data);
                            console.log(data);
                            if(data.errcode == 0){
                                showInfo('订单删除成功');
                                window.location.reload();
                            }else {
                                showInfo(data.errMsg);
                            }
                        })
                    }
                });
            }
        },
        created: function () {
            // 获取保单列表
            var policyUrl = '/wego168-xsinsurance-wechat/policy/listJson.jsp';
            $.get(policyUrl, function (data) {
                data = JSON.parse(data);
                console.log(data);
                if(data.errcode === 0){
                    vm.effectList = data.effectList.map(function (item) {
                        return {
                            id: item.id,
                            policyNo: item.policyNo,
                            productName: item.productName,
                            insurantName: item.insurantName,
                            premiumY: item.premiumY,
                            effectiveDateYMD:item.effectiveDateYMD.slice(2).replace(/-/g,"."),
                            expiryDateYMD:item.expiryDateYMD.slice(2).replace(/-/g,".")
                        }
                    });
                    vm.noEffectList = data.noEffectList.map(function (item) {
                        return {
                            id: item.id,
                            policyNo: item.policyNo,
                            productName: item.productName,
                            insurantName: item.insurantName,
                            premiumY: item.premiumY,
                            effectiveDateYMD:item.effectiveDateYMD.slice(2).replace(/-/g,"."),
                            expiryDateYMD:item.expiryDateYMD.slice(2).replace(/-/g,".")
                        }
                    });
                    console.log(vm.effectList);
                }

                // 获取未支付订单数据
                var orderUrl = '/wego168-xsinsurance-wechat/order/listJson.jsp';
                $.get(orderUrl, function (data) {
                    data = JSON.parse(data);
                    console.log(data);
                    if(data.errcode === 0){
                        data.unPayList.forEach(function (item) {
                            item.effectiveDateYMD = String(item.effectiveDateYMD).slice(2).replace(/-/g,".");
                            item.expiryDateYMD = String(item.expiryDateYMD).slice(2).replace(/-/g,".");
                        });
                        vm.unPayList = data.unPayList;
                    }
                });

            });

            // 获取未提交订单列表
            var unSubmitOrder = store.getItem('unSubmitOrder');
            if(unSubmitOrder){
                unSubmitOrder.policyStartTime = String(unSubmitOrder.policyStartTime).slice(2).replace(/-/g,".");
                unSubmitOrder.policyEndTime = String(unSubmitOrder.policyEndTime).slice(2).replace(/-/g,".");
            }
            this.unSubmitList.push(unSubmitOrder);
            console.log(this.effectList.length , this.noEffectList.length , this.unPayList.length , this.unSubmitList.length);
        }
    })
</script>

</body>
</html>                        